<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画初体验</title>
		<style>
			.box {
				width: 100px;
				height: 100px;
				background-color: #00f;
				animation: move 5s; /* 播放动画:动画名 播放时间 */
			}
			/* 制作动画关键帧 */
			@keyframes move {
				0% { /* 动画初始状态 */
					background-color: #00f;
				}
				100% { /* 动画结束状态 */
					background-color: #0f0;
					/* 边框圆角，切成圆形 */
					border-radius: 50px;
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>